<template>
  <div>
    <!-- 1级评论 -->
    <div class="commentBar">
      <div class="commentUser">
        <div class="img">
          <img :src="$axios.defaults.baseURL+comment.user.head_img" alt />
        </div>

        <div class="nameTime">
          {{comment.user.nickname}}
          <span>2小时前</span>
        </div>

        <div class="reply" :data-replyId="comment.id">回复</div>
      </div>
      <div class="commentMain">
        <parent v-if="comment.parent" :parent="comment.parent"></parent>
        <div class="commentMainText">{{comment.content}}</div>
      </div>
    </div>
    <!-- 底部写跟帖 -->
    <!-- <div class="textInput">
      <div class="writeOne">
        <input type="text" />
        <div class="icons"></div>
      </div>
    </div>-->
  </div>
</template>

<script>
import parent from "./parent";
export default {
  props: ["comment"],
  components: {
    parent
  }
};
</script>

<style lang="less" scoped>
.commentBar {
  padding: 5.556vw;

  .commentUser {
    display: flex;
    justify-content: space-between;
    .img {
      width: 13.889vw;
      height: 13.889vw;
      img {
        object-fit: cover;
        border-radius: 50%;
        width: 100%;
      }
    }
    .nameTime {
      padding-left: 2.222vw;
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 4.444vw;

      span {
        color: #707070;
        font-size: 3.333vw;
      }
    }
    .reply {
      color: #707070;
    }
  }
  .commentMain {
    border-bottom: 1px solid #cccccc;
    padding: 4.167vw 0;
    .commentMainText {
      padding-top: 2.778vw;
    }
  }
}
</style>